<template>
  <div class="header-menu">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">{{ $t('Home') }}</el-menu-item>
      <el-menu-item index="2">{{ $t('Gamecenter') }}</el-menu-item>
      <el-menu-item index="3">{{ $t('Individualcenter') }}</el-menu-item>
      <el-menu-item index="4">{{ $t('topUp') }}</el-menu-item>

      <!-- <el-menu-item index="5">活動</el-menu-item>
      <el-menu-item index="7">客服</el-menu-item>
      <el-menu-item index="8">商務合作</el-menu-item>
      <el-menu-item index="9">下載</el-menu-item> -->
      <el-sub-menu index="10">
        <template #title>
          <div>
            {{ $t('Language') }}
            <!-- <el-image
              style="height: 30px"
              src="https://cdn.91easyplay.com/public/pc/images/circle.png"
            /> -->
          </div>
        </template>
        <el-menu-item index="101"> {{ $t('Chinese') }}</el-menu-item>
        <el-menu-item index="102">{{ $t('English') }}</el-menu-item>
        <el-menu-item index="103">{{ $t('raditional') }}</el-menu-item>
      </el-sub-menu>
      <!-- <el-sub-menu index="11">
        <template #title>
          <div>
            语言
       
          </div>
        </template>
        <el-menu-item index="11-1"> <loginBox class="user-box-component"> </loginBox></el-menu-item>
      </el-sub-menu> -->
    </el-menu>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { showDialog } from 'vant'

import loginBox from './components/loginBox.vue'
const { locale } = useI18n()

const router = useRouter()
const activeIndex = ref('1')
import { useUserStore } from '@/stores/user'
const store = useUserStore()
const user = computed(() => store.getUserInfo)

import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
let { proxy } = instance
console.log(user.value)

if (sessionStorage.getItem('HYnavtab')) {
  activeIndex.value = ref(sessionStorage.getItem('HYnavtab'))
  console.log(activeIndex.value)
}

if (localStorage.getItem('localeKey') == 'zh') {
  locale.value = 'zh'
}
if (localStorage.getItem('localeKey') == 'en') {
  locale.value = 'en'
}
if (localStorage.getItem('localeKey') == 'zhxg') {
  locale.value = 'zhxg'
}
const handleSelect = (key, keyPath) => {
  if (key == 101) {
    locale.value = 'zh'

    localStorage.setItem('localeKey', 'zh')
  }
  if (key == 102) {
    locale.value = 'en'
    localStorage.setItem('localeKey', 'en')
  }
  if (key == 103) {
    locale.value = 'zhxg'
    localStorage.setItem('localeKey', 'zhxg')
  }

  sessionStorage.setItem('HYnavtab', key)
  if (key == 1) {
    router.push({
      name: 'home',
      params: {
        key,
      },
    })
  }
  if (key == 2) {
    router.push({
      name: 'game',
      params: {
        key,
      },
    })
  }
  if (key == 4) {
    if (!user.value.user_id) {
      showDialog({
        message: proxy.$t('pleaselogin'),
      }).then(() => {
        // 关闭弹窗的逻辑
      })
      return
    }

    window.location = `https://test.milaasia.com/#/topUp?app_id=20049&user_id=${user.value.user_id}`
  }
}
</script>
<style lang="scss">
.header-menu {
  // display: flex;
  // align-items: center;
  // justify-content: center;

  .el-menu--horizontal.el-menu {
    border-bottom: 0;
  }
}
.el-menu-item {
  // font-weight: bold;
  font-size: 16px;
}
</style>
